<template>
  <div class="detail section">
    <el-form :model="password" label-width="400px">
      <div class="h2 line">登录信息 </div>
      <el-form-item label="登录账号：">
        <el-input :disabled="true" v-model="company.username"></el-input>
      </el-form-item>
      <el-row :gutter="10" class="item-row">
        <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
          <el-form-item label="原始登录密码：">
            <el-input type="password" v-model="password.oldpwd"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="item-row">
        <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
          <el-form-item label="新密码：">
            <el-input type="password" v-model="password.newpwd"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="item-row">
        <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
          <el-form-item label="确认新密码：">
            <el-input type="password" v-model="password.compwd"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="danger" :loading="resetLoading" @click="resetPwd">更新密码</el-button>
      </el-form-item>
    </el-form>
    <el-form :model="company" :disabled="isDisabled" label-width="400px">
      <div class="h2 line">企业信息 </div>
      <el-form-item label="企业名称：">
        <el-input v-model="company.title"></el-input>
      </el-form-item>
      <el-form-item label="企业简称：">
        <el-input v-model="company.simple_title"></el-input>
      </el-form-item>
      <el-form-item label="纳税人识别号：">
        <el-input v-model="company.tax_number"></el-input>
      </el-form-item>
      <el-form-item label="企业营业执照：">
        <el-upload
          class="uploader"
          :show-file-list="false"
          :action="$uploadurl"
          :headers="{ token: userInfo.token }"
          :on-success="handleLicenseSuccess"
          :before-upload="beforeUpload">
          <img v-if="company.license" :src="company.license" @click="viewPic(company.license)" class="avatar">
          <i v-else class="el-icon-plus uploader-icon"></i>
          <!-- <span slot="tip" class="danger-text">（仅支持300KB以内JPG/JEPG/PNG格式图片 要求：画面清晰无遮挡）</span> -->
        </el-upload>
      </el-form-item>
      <el-form-item label="企业联系人姓名：">
        <el-input v-model="company.contact"></el-input>
      </el-form-item>
      <el-form-item label="企业联系人电话：">
        <el-input v-model="company.contact_phone"></el-input>
      </el-form-item>
      <div class="h2 line">法人信息</div>
      <el-form-item label="真实姓名：">
        <el-input v-model="company.legal_person"></el-input>
      </el-form-item>
      <el-form-item label="身份证号码：">
        <el-input v-model="company.legal_person_card"></el-input>
      </el-form-item>
      <el-form-item label="身份证人像面：">
        <el-upload
          class="uploader"
          :action="$uploadurl"
          :headers="{ token: userInfo.token }"
          :show-file-list="false"
          :on-success="handleIdBSuccess"
          :before-upload="beforeUpload">
          <img v-if="company.id_card_front" @click="viewPic(company.id_card_front)" :src="company.id_card_front" class="idcard">
          <i v-else class="el-icon-plus idcard"></i>
          <!-- <span slot="tip" class="danger-text">（仅支持300KB以内JPG/JEPG/PNG格式图片 要求：画面清晰无遮挡）</span> -->
        </el-upload>
      </el-form-item>
      <el-form-item label="身份证国徽面：">
        <el-upload
          class="uploader"
          :show-file-list="false"
          :action="$uploadurl"
          :headers="{ token: userInfo.token }"
          :on-success="handleIdASuccess"
          :before-upload="beforeUpload">
          <img v-if="company.id_card_reverse" @click="viewPic(company.id_card_reverse)" :src="company.id_card_reverse" class="idcard">
          <i v-else class="el-icon-plus idcard"></i>
        </el-upload>
      </el-form-item>
      <div class="h2 line">账户信息 </div>
      <el-form-item label="基本开户银行名称：">
        <el-input v-model="company.bank_title"></el-input>
      </el-form-item>
      <el-form-item label="基本开户银行账号：">
        <el-input v-model="company.bank_number"></el-input>
      </el-form-item>
      <el-form-item label="开户银行所在地：">
        <el-input v-model="company.bank_address"></el-input>
      </el-form-item>
    </el-form>
    <!-- <div class="buttons">
      <el-button type="primary" v-if="['未完善信息', '审核驳回'].includes(companyInfo.status_audit)" v-show="isDisabled" @click="isDisabled = false">修改信息</el-button>
      <el-button type="primary" v-if="['未完善信息', '审核驳回'].includes(companyInfo.status_audit)" v-show="!isDisabled" @click="saveEdit()">保存信息</el-button>
      <el-button type="success" v-if="['未完善信息', '审核驳回'].includes(companyInfo.status_audit)" @click="submit()">提交审核</el-button>
    </div> -->
    <el-dialog :visible.sync="dialogImageVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'auth-info',
  data() {
    return {
      dialogImageVisible: false,
      dialogImageUrl: '',
      type: 'view',
      isDisabled: false,
      resetLoading: false,
      password: {
        oldpwd: '',
        newpwd: '',
        compwd: ''
      },
      company: {
        title: '',
        simple_title: '',
        tax_number: '',
        license: '',
        licenseList: [],
        address: '',
        contact: '',
        contact_phone: '',
        legal_person: '',
        legal_person_card: '',
        id_card_front: '',
        cardFrontList: [],
        id_card_reverse: '',
        cardReverseList: [],
        bank_title: '',
        bank_number: '',
        bank_address: '',
        rate: '',
        rate_type: '1',
        company_vocational_id: '',
      }
    }
  },
  computed:{
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    viewPic(url) {
      this.dialogImageUrl = url
      this.dialogImageVisible = true
    },
    handleLicenseSuccess(res, file) {
      if (res.status === 1) {
        this.companyInfo.trading_certificate = res.data.list.file
      }
    },
    handleIdASuccess(res, file) {
      if (res.status === 1) {
        this.companyInfo.info_corporation.corporate_idcard_A = res.data.list.file
      }
    },
    handleIdBSuccess(res, file) {
      if (res.status === 1) {
        this.companyInfo.info_corporation.corporate_idcard_B = res.data.list.file
      }
    },
    handleBankLicenceSuccess(res, file) {
      if (res.status === 1) {
        this.companyInfo.bank_licence = res.data.list.file
      }
    },
    handleInvoceSuccess(res, file) {
      if (res.status === 1) {
        this.companyInfo.invoice_other = res.data.list.file
      }
    },
    beforeUpload(file) {
      const isLt300K = file.size / 1024 < 300;

      if (!isLt300K) {
        this.$message.error('上传图片大小不能超过 300KB!');
      }
      return isLt300K;
    },
    resetPwd() {
      let oldpwd = this.password.oldpwd
      let newpwd = this.password.newpwd
      let compwd = this.password.compwd
      if(oldpwd.length <= 0) {
        this.$message.error('请输入原始密码!');
        return false;
      }
      if(newpwd.length <= 0) {
        this.$message.error('请输入新密码!');
        return false;
      }
      if(newpwd !== compwd) {
        this.$message.error('两次密码不一致!');
        return false;
      }
      this.resetLoading = true
      this.$http.post('company/resetpwd', {
        'oldpwd': oldpwd,
        'newpwd': newpwd,
        'compwd': compwd,
      }).then(res => {
        console.log(res)
        if(res.code === 0) {
          this.$message.success("重置密码成功，请重新登录");
          this.$store.dispatch('setUserInfo', null)
          this.$router.push('/home')
        }
        this.resetLoading = false
      }).catch(() => {
        this.resetLoading = false
      })
    },
    getInfo() {
      this.$http.get('company/info').then(res => {
        console.log(res)
        if (res.code === 0) {
          this.company.username = res.company_info.username
          this.company.title = res.company_info.title
          this.company.company_vocational_id = res.company_info.company_vocational_id
          this.company.simple_title = res.company_info.simple_title
          this.company.tax_number = res.company_info.tax_number
          this.company.license = res.company_info.license
          this.company.address = res.company_info.address
          this.company.contact = res.company_info.contact
          this.company.contact_phone = res.company_info.contact_phone
          this.company.legal_person = res.company_info.legal_person
          this.company.legal_person_card = res.company_info.legal_person_card
          this.company.id_card_front = res.company_info.id_card_front
          this.company.id_card_reverse = res.company_info.id_card_reverse
          this.company.bank_title = res.company_info.bank_title
          this.company.bank_number = res.company_info.bank_number
          this.company.bank_address = res.company_info.bank_address
          this.company.rate = res.company_info.rate
          this.company.rate_type = res.company_info.rate_type
        }
      })
    }
  },
  mounted() {
    if (this.type !== 'add') {
      this.isDisabled = true
    } else {
      this.isDisabled = false
    }
    this.getInfo()
  }
}
</script>
<style lang="less" scoped>
.h2 {
  margin-bottom: 20px;
}
.uploader {
  display: inline-block;
  margin-right: 20px;
  vertical-align: top;
}
.uploader .el-upload {
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.uploader .el-upload:hover {
  border-color: #409EFF;
}
.uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 256px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 2px dashed #eee;
}
.avatar {
  width: 256px;
  height: 178px;
  display: block;
}
.idcard {
  width: 200px;
  height: 125px;
  line-height: 125px;
  font-size: 36px;
  color: #999;
  vertical-align: top;
  &.el-icon-plus {
    border: 2px dashed #eee;
  }
}
/deep/ .el-input.is-disabled .el-input__inner {
  background-color: transparent;
  border-color: transparent;
  cursor: text;
  color: #333;
}
img {
  object-fit: contain;
}
</style>
